<template>
    <div>
        <van-nav-bar title="历史记录" fixed left-text="返回" left-arrow @click-left="goBack">
            <template #right>
                <van-icon name="fire-o" color="#ee0a24" size="20"/>
            </template>
        </van-nav-bar>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="product-list-refresh">
            <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                    @offset="300"
            >
                <div class="product-item" v-for="(item, index) in productList" :key="index"
                     @click="productDetail(item)">
                    <img :src="prefix(item.productPic)"/>
                    <div class="product-info">
                        <p class="name">{{item.productName}}</p>
                        <p class="subtitle">{{item.productSubTitle}}</p>
                        <span class="price">￥ {{item.productPrice}}</span>
                    </div>
                </div>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
    import navBar from '../../components/NavBar'
    import sHeader from '../../components/SimpleHeader'
    import {listPage} from '../../api/history'

    const defaultListQuery = {
        pageNum: 1,
        pageSize: 10,
    }
    export default {
        name: "productHistory",
        components: {
            navBar,
            sHeader
        },
        data() {
            return {
                listQuery: Object.assign({}, defaultListQuery),
                loading: false,
                finished: false,
                refreshing: false,
                productList: [],
            }
        },
        methods: {
            getList() {
                listPage(this.listQuery).then(res => {
                    const result = res.data;
                    this.productList = result.content
                    this.finished = true
                    this.loading = false;
                })
            },
            onLoad() {
                if (!this.refreshing && this.page < this.totalPage) {
                    this.page = this.page + 1
                }
                if (this.refreshing) {
                    this.productList = [];
                    this.refreshing = false;
                }
                this.getList()
            },
            onRefresh() {
                this.refreshing = true
                this.finished = false
                this.loading = true
                this.listQuery = Object.assign({}, defaultListQuery);
                this.onLoad()
            },
            productDetail(item) {
                this.$router.push({path: `product/${item.productId}`})
            },
            goBack(){
                this.$router.go(-1);
            }
        },
        created() {
            this.getList();
        }
    }
</script>

<style lang="less" scoped>
    @import '../../common/style/mixin';

    .product-list-content {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 1000;
        background: #fff;

        .category-header {
            .fj();
            width: 100%;
            height: 50px;
            line-height: 50px;
            padding: 0 15px;
            .boxSizing();
            font-size: 15px;
            color: #656771;
            z-index: 10000;

            &.active {
                background: @primary;
            }

            .icon-left {
                font-size: 25px;
                font-weight: bold;
            }

            .header-search {
                display: flex;
                width: 76%;
                height: 20px;
                line-height: 20px;
                margin: 10px 0;
                padding: 5px 0;
                color: #232326;
                background: #F7F7F7;
                .borderRadius(20px);

                .nbSearch {
                    padding: 0 5px 0 20px;
                    font-size: 17px;
                }

                .search-title {
                    font-size: 12px;
                    color: #4e4b4b;
                    background: #F7F7F7;
                }
            }

            .icon-More {
                font-size: 20px;
            }

            .search-btn {
                height: 28px;
                margin: 8px 0;
                line-height: 28px;
                padding: 0 5px;
                color: #fff;
                background: @primary;
                .borderRadius(5px);
                margin-top: 10px;
            }
        }
    }

    .product-list-refresh {
        margin-top: 78px;

        .product-item {
            .fj();
            width: 100%;
            height: 120px;
            padding: 10px 0;
            border-bottom: 1px solid #dcdcdc;

            img {
                width: 140px;
                height: 120px;
                padding: 0 10px;
                .boxSizing();
            }

            .product-info {
                width: 56%;
                height: 120px;
                padding: 5px;
                text-align: left;
                .boxSizing();

                p {
                    margin: 0
                }

                .name {
                    width: 100%;
                    max-height: 40px;
                    line-height: 20px;
                    font-size: 15px;
                    color: #333;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .subtitle {
                    width: 100%;
                    max-height: 20px;
                    padding: 10px 0;
                    line-height: 25px;
                    font-size: 13px;
                    color: #999;
                    overflow: hidden;
                }

                .price {
                    color: @primary;
                    font-size: 16px;
                }
            }
        }
    }
</style>